<template>
  <div class="acre-card-main">
    <el-card :body-style="{padding:0,margin:0,borderRadius:'10px',width:mainWith+'px',borderRadius:'14px'}" shadow="always">
      <div class="acre-card-container" :style="{height:mainWith+'px'}" @click="handleClickAcreCard">
        <div class="acre-card-wrap">
          <div class="acre-card-img" :style="{backgroundImage:'url('+imgUrl+')',height:cardImgHeight+'px',backgroundSize:'100% 100%'}"></div>
          <div class="acre-card-info-wrap" :style="{height:(mainWith*0.46)+'px'}">
            <div class="acre-area-address-label" :style="{height:itemHeight+'px'}">
              <el-tooltip effect="light" :content="address" placement="bottom">
                <div class="acre-info-address">{{address}}</div>
              </el-tooltip>
              <el-tooltip effect="light" :content="label" placement="top">
                <div class="acre-info-label">{{label}}</div>
              </el-tooltip>
            </div>
            <div class="acre-info-status-name" :style="{height:(itemHeight-10)+'px'}">
              <div class="acre-info-name" :title="name">{{name}}</div>
              <div class="acre-info-status" :title="status.statusLabel" :style="{color:status.statusColor}">{{status.statusLabel}}</div>
            </div>
            <div class="acre-info-area" :style="{height:itemHeight+'px'}">
              <span style="display:inline-block;width:74px">种植面积&nbsp;:&nbsp;</span>
              <el-tooltip effect="light" :content="area+''" placement="bottom">
                <span class="acre-area">{{area}}亩</span>
              </el-tooltip>
              <div class="acre-radio" @click="setRadioStatus">
                <radio :ref="'radio_custom_'+id" :width="16"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
    import radio from "./radio"
    export default {
        components:{
            radio
        },
        name: 'main-title',
        data(){
            return {
                checked: false,
                id: '',
                flag: '',
                label: "",
                address: "",
                status: {
                    flag:'',
                    statusColor: '',
                    statusLabel: ''
                },
                area:'',
                name: '',
                imgUrl: '',
                showChecked: 1,
                cardImgHeight:0,
                itemHeight:0,
                mainWith:0
            }
        },
        methods: {
            setData(obj){
                const {id, flag, label, address, area, name, imgUrl, status, width} = obj
                this.id = id
                this.flag = flag
                this.label = label
                this.address = address
                this.area = area
                this.name = name
                this.imgUrl = imgUrl
                this.imgUrl = require('@/assets/img/home/land.png')
                this.status = status
                this.mainWith = width
                this.cardImgHeight = this.mainWith * 0.54
                this.itemHeight = (this.mainWith*0.46 - 10)/3
            },
            handleClickAcreCard(){
                this.$emit("openFarmDetail",this.getObjDetail())
            },
            setRadioChecked(status){
                this.checked = status
                this.$refs['radio_custom_'+this.id].switch(this.checked)
            },
            setRadioStatus(event){
                // 禁止子组件事件关联触发父组件事件
                event.stopPropagation();
                this.checked = !this.checked
                this.$refs['radio_custom_'+this.id].switch(this.checked)
                this.$emit("radioSelect", this.checked, this.getObjDetail())
            },
            getObjDetail(){
                const obj = {
                    id:this.id ,
                    flag: this.flag ,
                    label: this.label,
                    address: this.address,
                    area: this.area,
                    name: this.name,
                    imgUrl: this.imgUrl,
                    status: this.status,
                    width: this.width
                }
                return obj
            }
        }
    }
</script>
<style lang="scss" scoped>
  .acre-card-main {
    .acre-card-container{
      color: #353535;
      cursor: pointer;
      .acre-card-wrap{
        border: 1px solid #fff;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        padding: 16px;
        .acre-card-img{
          border-radius: 4px;
          width: 100%;
          object-fit: fill;
        }
        .acre-card-info-wrap{
          font-size: 15px;
          .acre-area-address-label{
            display: flex;
            align-items: center;
            .acre-info-label{
              flex: 1;
              text-align: right;
              color: #00965b;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .acre-info-address{
              flex: 1;
              font-weight: bolder;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
          .acre-info-status-name{
            align-items: center;
            display: flex;
            .acre-info-status{
              flex: 2;
              text-align: right;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .acre-info-name{
              flex: 1;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
          .acre-info-area{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .acre-area{
              box-sizing: border-box;
              display: inline-block;
              flex: 2;
              text-align: left;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .acre-radio{
              flex:1;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
</style>
